<template>
  <div class="popup-component-wrapper">
    <div class="tab-pop-box">
      <van-cell @click="showPopup" show-arrow="false" close-on-popstate="true">
        <svg
          focusable="false"
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          fill="currentColor"
          viewBox="0 0 1024 1024"
        >
          <path
            d="M853.333333 725.333333v85.333334H426.666667v-85.333334h426.666666z m0-256v85.333334H170.666667v-85.333334h682.666666z m0-256v85.333334H170.666667v-85.333334h682.666666z"
          ></path>
        </svg>
      </van-cell>
      <van-popup
        v-model:show="show"
        position="bottom"
        :style="{ height: '85%' }"
        closeable
        click="closePopup"
      >
        <div class="tab-pop-content-box">
          <div class="tab-pop-content-title">全部频道</div>
          <div class="tab-pop-content">
            <!-- <template v-for="item of tabsList" :key="item.id">
              <div class="tab-pop-content-item">
                <div @click="toHomeRoute(item.url, item.id)">
                  {{ item.name }}
                </div>
              </div>
            </template> -->
          </div>
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script setup>
import {ref} from 'vue'

const show = ref(false);
const showPopup = () => {
  show.value = true;
};
const closePopup = () => {
  show.value = false;
};
</script>

<style lang="scss" scope>
.popup-component-wrapper {
  .tab-pop-box {
    width: 48vw/375 * 100;
    height: 40vw/375 * 100;
    .tab-pop-content-box {
      .tab-pop-content-title {
        height: 48vw/375 * 100;
        line-height: 48vw/375 * 100;
        padding: 0 48vw/375 * 100;
        text-align: center;
        font-size: 16vw/375 * 100;
      }
      .tab-pop-content {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        column-gap: 10vw/375 * 100;
        row-gap: 10vw/375 * 100;
        justify-content: center;
        align-items: center;
        padding: 12vw/375 * 100;
        text-align: center;
        .tab-pop-content-item {
          height: 40vw/375 * 100;
          line-height: 40vw/375 * 100;
          background-color: rgba(242, 244, 250);
        }
      }
    }
  }
}
</style>